<template>
  <div :id="id" class="orderArea"></div>
</template>
<script>
import echarts from "echarts";
import echartsTheme from "@/plugins/wyz-echarts/theme/sweet-light.json";
export default {
  props: {
    chardata: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data: () => ({
    id: "barChart",
    myChart: null
  }),
  watch: {
    type: v => {
      this.initOption(v);
    },
    chardata: {
      handler(newval) {
        this.loadChart(newval);
      },
      immediate: true,
      deep: true
    }
  },
  beforeDestroy() {
    if (!this.myChart) {
      return;
    }
    this.myChart.dispose();
    this.myChart = null;
  },
  mounted() {
    this.loadChart();
    // this.chardata = this.initOption;
  },
  methods: {
    loadChart(chardata = this.initOption()) {
      this.$nextTick(() => {
        echarts.registerTheme("westeros", echartsTheme);
        this.myChart = echarts.init(
          document.getElementById(this.id),
          "westeros"
        );
        this.myChart.setOption(chardata);
      });
    },
    initOption() {
      let data = {
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)"
            }
          }
        ]
      };
      return data;
    }
  }
};
</script>
